<template>
    <div>
        <el-card class="head-card">
            <el-row type="flex" class="row-bg" justify="space-around">
                <el-col :span="4">
                    <label class="el-form-item__label">账户余额:</label>
                    <span class="el-form-item__content">1000000元</span>
                </el-col>
                <el-col :span="4">
                    <el-button size="small" type="info" disabled>去充值(预留)</el-button>
                </el-col>
                <el-col :span="4">
                    <label class="el-form-item__label">昨日消费:</label>
                    <span class="el-form-item__content">1000000元</span>
                </el-col>
                <el-col :span="4">
                    <label class="el-form-item__label">历史消费:</label>
                    <span class="el-form-item__content">1000000元</span>
                </el-col>
            </el-row>
        </el-card>
        <el-card class="report-list">
            <el-row slot="header" :gutter="20" flex="main:center cross:center">
                <el-col :span="2">
                    <el-button size="small" type="primary" @click="onAdd">新增计划</el-button>
                </el-col>
                <el-col :span="18">
                    <M-selector :items="['time', 'plan']" @onSearch="onSearch" />
                </el-col>
                <el-col :span="3">
                    <el-button size="small" type="primary" @click="onUploadOrder">下载报表</el-button>
                </el-col>
            </el-row>
            <M-table :list="listData" :fields="fields" @columnClick="columnClick" @pageChange="pageChange" :pageTotal="100">
                <template v-slot:action="row">
                    <el-button @click="editItem(row.data)" type="primary" size="mini" icon="el-icon-edit" circle></el-button>
                    <el-button @click="delItem(row.data)" type="danger" size="mini" icon="el-icon-delete" circle></el-button>
                </template>
            </M-table>
        </el-card>
        <Add-dialog :visible.sync="dialogVisible" />
    </div>
</template>

<script>
import fields from "./tableJson";
import AddDialog from "./Dialog";
export default {
    components: {
        AddDialog
    },
    data() {
        return {
            dialogVisible: false,
            params: {
                name: ""
            },
            fields,
            listData: [
                { time: new Date(), id: 1, loginname: "Admin", nickname: "管理员", email: "Admin@.admin.com", cellphone: "151178xxxx", sex: "male", active: 1 },
                {
                    time: new Date(),
                    id: 2,
                    loginname: "SenLin",
                    nickname: "森林",
                    email: "SenLin@.admin.com",
                    cellphone: "151178xxxx",
                    sex: "unknown",
                    active: 0
                },
                { time: new Date(), id: 4, loginname: "Admin1", nickname: "赵晓", email: "Admin@.admin.com", cellphone: "151178xxxx", sex: "male", active: 1 },
                { time: new Date(), id: 5, loginname: "Wujun", nickname: "吴军", email: "Admin@.admin.com", cellphone: "151178xxxx", sex: "male", active: 1 },
                { time: new Date(), id: 6, loginname: "Huang", nickname: "黄家", email: "Admin@.admin.com", cellphone: "151178xxxx", sex: "male", active: 1 }
            ]
        };
    },
    mounted() {
        this.getList();
    },
    methods: {
        onSearch(params) {
            console.log(params);
        },
        getList() {},
        onAdd() {
            this.dialogVisible = true;
        },
        onUploadOrder() {},
        editItem(row) {
            console.log("editItem", row);
        },
        delItem(row) {
            console.log("delItem", row);
        },
        columnClick(row) {
            console.log(row);
        },
        pageChange(page) {
            console.log("page:", page);
        },
        deleteUser() {
            this.$message({
                message: "这里请求api删除或者恢复用户之后刷新分页组件，列表自动更新",
                type: "success"
            });
        }
    }
};
</script>
<style lang="scss">
.head-card {
    margin-bottom: 15px;
}
</style>
